<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="/plugins/toastr/toastr.min.css">
    <link rel="stylesheet" href="/plugins/sweetalert2/sweetalert2.min.css">
    <!-- 自写主界面代码 -->
    <link rel="stylesheet" href="/my_works/css/admin_main.css">
    <!-- bootstrap-table -->
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
</head>

<body>
    <div class="row Container">
        <div class="col-md-5"></div>
        <h2>学生信息</h2>
        <form class="form-inline">
            <div class="form-group mx-sm-3 mb-2 ">
                <label for="searchName" class="sr-only">输入姓名</label>
                <input type="text" class="form-control " id="searchName" placeholder="姓名">
                <label for="searchName" class="sr-only">输入姓名</label>
                <input type="text" class="form-control" id="searchNo" placeholder="学号">
                <select class="form-control" id="searchSex">
                    <option value="" selected="selected">性别</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
            <button type="button" class="btn btn-primary mb-2" onclick="loadData()">查询</button>
            <button type="button" class="btn btn-primary  mb-2 ml-2" data-toggle="modal"
                data-target="#addStudentModal">新增
            </button>
        </form>
        <!-- 主要区域 学生表 -->
        <table class="table col-md-12" id="student-table"></table>

        <!-- ./col -->
    </div>

    <!--新增学生的模态框-->
    <div class="modal fade" id="addStudentModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">新增学生信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formInsertStudent">
                        <div class="form-group">
                            <label for="add-name">姓名</label>
                            <input type="text" class="form-control" id="add-name" placeholder="输入姓名" name="name">
                        </div>
                        <div class="form-group">
                            <label for="add-no">学号</label>
                            <input type="text" class="form-control" id="add-no" placeholder="输入学号" name="no">
                        </div>
                        <div class="form-group">
                            <label for="add-password">密码</label>
                            <input type="password" class="form-control" id="add-password" placeholder="输入密码"
                                name="password">
                        </div>
                        <div class="form-group">
                            <label for="add-age">年龄</label>
                            <input type="text" class="form-control" id="add-age" placeholder="输入年龄" name="age">
                        </div>
                        <div class="form-group">
                            <label for="add-sex">性别</label>
                            <select class="form-control" id="add-sex" name="sex">
                                <option value="1" name="sex">男</option>
                                <option value="2" name="sex">女</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="insertStudent()">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!--修改学生信息的模态框-->
    <div class="modal fade" id="updateStudentModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改学生信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formUpdateStudent">
                        <input type="text" hidden="hidden" id="update-id" name="id">
                        <div class="form-group">
                            <label for="add-name">姓名</label>
                            <input type="text" class="form-control" id="update-name" placeholder="输入姓名" name="name">
                        </div>
                        <div class="form-group">
                            <label for="add-no">学号</label>
                            <input type="text" class="form-control" id="update-no" placeholder="输入学号" name="no">
                        </div>
                        <div class="form-group">
                            <label for="add-password">密码</label>
                            <input type="password" class="form-control" id="update-password" placeholder="输入密码"
                                name="password">
                        </div>
                        <div class="form-group">
                            <label for="add-age">年龄</label>
                            <input type="text" class="form-control" id="update-age" placeholder="输入年龄" name="age">
                        </div>
                        <div class="form-group">
                            <label for="add-sex">性别</label>
                            <select class="form-control" id="update-sex" name="sex">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="updateConfirm">确认修改</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 展示学生成绩的模态框 -->
    <div class="modal fade" id="showScoreModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">成绩展示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>主要内容</p>
                    <table class="table" id="studentScoreTable">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">no</th>
                                <th scope="col">姓名</th>
                                <th scope="col">课程名</th>
                                <th scope="col">任课教师</th>
                                <th scope="col">成绩</th>
                                <th scope="col">操作</th>
                                <th scope="col">操作</th>


                            </tr>
                        </thead>
                        <tbody id="studentScoreTableBody">
                            <tr>
                                <th scope="row">1</th>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="addChoseCourse">增加选修课程</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!-- 展示查询学生未选择的课程的模态框 -->
    <div class="modal fade" id="selectNotChoseCourse">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">增加选修课程</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>主要内容</p>
                    <table class="table" id="selectNotChoseCourseTable">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">课程名</th>
                                <th scope="col">授课教师</th>
                                <th scope="col">课程类型</th>
                                <th scope="col">学分</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody id="selectNotChoseCourseTableBody">
                            <tr>
                                <th scope="row">1</th>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确认</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <!-- 警告的提示框 -->
    <div class="modal fade" id="modal-warning-delete-student" style="display: none;" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-warning">
                <div class="modal-header">
                    <h4 class="modal-title">警告</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h4>删除后无法复原,是否继续</h4>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-outline-dark" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-outline-dark" id="confirmDeleteStudent">确认</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>





    <!-- jQuery -->
    <script src="/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/dist/js/adminlte.min.js"></script>
    <script src="/plugins/bootstraptable/bootstrap-table.js"></script>
    <script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>
    <script src="/plugins/toastr/toastr.min.js"></script>
    <script src="/plugins/sweetalert2/sweetalert2.min.js"></script>
    <!-- 引入axios -->
    <script src="/plugins/axios/axios.min.js"></script>
    <!-- 引入自写js -->
    <script src="/my_works/js/student_manage.js"></script>
    <script src="/my_works/common/common.js"></script>
    <script>






        loadData = () => {
            $("#student-table").bootstrapTable("destroy");
            $('#student-table').bootstrapTable({
                responseHandler: (res) => {//对后台数据进行处理
                    o = new Object();
                    o.total = res.data.total;
                    o.rows = res.data.records;
                    return o;
                },
                url: "/api/student",
                pageSize: 5,//分页每页数据条数
                pageNumber: 1,//首页的页码
                pagination: true,
                striped: true,//没搜到,等下试一下
                singleSelect: false,
                sidePagination: "server",
                queryParams: (params) => {
                    let paraObj = {
                        size: params.limit,
                        page: params.offset / params.limit,
                        sort: "id",
                        direct: "desc",
                        name: $("#searchName").val(),
                        sex: $("#searchSex").val(),
                        no: $("#searchNo").val()

                    }
                    return paraObj
                },
                columns: [{
                    field: 'no',
                    title: '学号',
                    width: 150,
                }, {
                    field: 'name',
                    title: '姓名',
                    width: 150,
                }, {
                    field: 'sex',
                    title: '性别',
                    width: 150,
                    formatter: (value, row, index) => {
                        if (row.sex === 0) {
                            return "未知";
                        } else if (row.sex === 1) {
                            return "男"
                        } else {
                            return "女"
                        }

                    }
                }, {
                    title: "邮箱",
                    width: 150,
                    field: "email"
                },
                {
                    title: "年龄",
                    width: 150,
                    field: "age"
                }, {
                    title: '查询',
                    width: 150,
                    formatter: (value, row) => {
                        return '<button type="button" class="btn btn-block btn-primary btn-sm" onclick="selectStudentInfo(' + row.id + ')">查询成绩</button>';


                    }
                }, {
                    title: '处理',
                    width: 150,
                    formatter: (value, row) => {

                        return '<button type="button" class="btn btn-block btn-primary btn-sm" onclick="updateStudent(' + row.id + ')">修改</button>'
                            + '<button type="button" class="btn btn-block btn-primary btn-sm"  onclick="deleteStudent(' + row.id + ')" >删除</button>';
                        // return '<button type="button" class="btn btn-block btn-primary btn-sm" onclick="updateStudent(' + row.id + ')>Primary</button>'
                        // + '<a onclick='deleteStudent' + row.id + ')>删除</a>';
                    }
                }],
            })

        }

        //函数入口
        main = () => {
            loadData();
        }
        main()

        //    以下部分为所需的函数
        //更新学生信息
        updateStudent = (id) => {
            axios({
                url: "/api/student/getOne?id=" + id,
                method: "GET",

            }).then((res) => {

                let data = res.data.data;
                // console.log(data);

                //调用模态框
                $("#updateStudentModal").modal("show")
                //设置参数
                $("#update-id").val(data.id)
                // console.log(data.id);
                $("#update-name").val(data.name)
                $("#update-no").val(data.no)
                $("#update-sex").val(data.sex)
                $("#update-age").val(data.age)
                $("#updateConfirm").click(() => {
                    //获取所需的值
                    let data = $("#formUpdateStudent").serializeArray()
                    let o = {};
                    data.forEach(element => {
                        o[element.name] = element.value;
                    });

                    axios({
                        url: "/api/student",
                        method: "PUT",
                        data: JSON.stringify(o),
                        // headers: { 'content-type': 'application/json;charset=UTF-8' }
                    }).then(() => {
                        successInfo("修改信息成功")
                        $("#updateStudentModal").modal("hide");
                        loadData()
                    })

                })
            })
        }





        //删除一个学生
        deleteStudent = (id) => {
            //提示是否要进行删除
            //开启模态框
            $("#modal-warning-delete-student").modal("show")
            //确认后进行删除
            $("#confirmDeleteStudent").unbind("click").click(() => {
                axios({
                    url: "/api/student",
                    method: "DELETE",
                    data: JSON.stringify({
                        id: id
                    }),
                }).then(() => {
                    // console.log(res);
                    loadData()
                    successInfo("删除成功")
                    $("#modal-warning-delete-student").modal("hide")

                })

            })
        }

        //查询学生成绩信息
        selectStudentInfo = (id) => {
            //调用成绩展示模态框展示数据
            $("#showScoreModal").modal("show");
            axios({
                url: "/api/student/score/id?id=" + id,
                method: "GET",
            }).then((res) => {
                // console.log(res.data);
                //清除所有子元素
                $("#studentScoreTableBody").empty()

                res.data.data.forEach((data) => {
                    //添加表格子项
                    html = $("<tr>"
                        + "<td>" + data.no + "</td>"
                        + "<td>" + data.name + "</td>"
                        + "<td>" + data.课程名 + "</td>"
                        + "<td>" + data.任课教师 + "</td>"
                        + "<td>" + data.成绩 + "</td>"
                        + "<td>" + '<input type="text"  id="score-' + data.scoreId + '" placeholder="修改后成绩">' + "</td>"
                        + "<td>" + '<button type="button" class="btn btn-block btn-primary btn-sm" onclick="changeScore(' + data.scoreId + ')">修改成绩</button>' + "</td>"
                        // + '<input type="text" class="score-' + data.id + '" id="searchName" placeholder="修改成绩">'
                        // + '<button type="button" class="btn btn-block btn-primary btn-sm" onclick="changeScore(' + data.scoreId + "," + $('#score-' + data.id + ').val()' + ')">修改成绩</button>'
                        + "</tr>")
                    console.log(data);
                    $("#studentScoreTableBody").append(html)
                    $("#addChoseCourse").click(() => {
                        selectNotChoseCourse(data.no);
                    })
                })

            })
        }
        //插入学生信息
        insertStudent = () => {
            let data = $("#formInsertStudent").serializeArray();
            let o = {};
            data.forEach(element => {
                o[element.name] = element.value;
            })
            axios({
                url: "/api/student",
                method: "POST",
                data: JSON.stringify(o),
            }).then(() => {
                // 取消模态框
                $("#addStudentModal").modal("hide")
                // 重新加载数据
                loadData();
                successInfo("新增学生成功");
            })
        }
        // 修改成绩
        changeScore = (scoreId) => {
            // scoreId = 
            // console.log(scoreId);
            let scoreInputId = "#score-" + scoreId
            let score = $(scoreInputId).val()
            console.log(scoreInputId);
            console.log(score);
            axios({
                url: "/api/student/score/change",
                data: {
                    id: scoreId,
                    score: score
                },
                method: "post"
            }).then(() => {
                successInfo("修改成功");
                $("#showScoreModal").modal("hide");
            }

            )
        }

        //查询学生未选择的课程
        selectNotChoseCourse = (studentNo) => {
            $("#selectNotChoseCourse").modal("show");
            axios({
                url: "/api/course/choose_course?studentNo=" + studentNo,
                method: "GET",
            }).then((res) => {
                // console.log(res.data);
                //清除所有子元素
                $("#selectNotChoseCourseTableBody").empty()

                res.data.data.forEach((data) => {
                    //添加表格子项
                    html = $("<tr>"
                        + "<td>" + data.courseName + "</td>"
                        + "<td>" + data.teacherName + "</td>"
                        + "<td>" + data.type + "</td>"
                        + "<td>" + data.credit + "</td>"
                        + "<td>" + '<button type="button" class="btn btn-block btn-primary btn-sm" onclick="selectNotChoseCourseConfirm(' + studentNo + ',' + data.courseNo + ')">确认新增选课</button>' + "</td>"
                        // + '<input type="text" class="score-' + data.id + '" id="searchName" placeholder="修改成绩">'
                        // + '<button type="button" class="btn btn-block btn-primary btn-sm" onclick="changeScore(' + data.scoreId + "," + $('#score-' + data.id + ').val()' + ')">修改成绩</button>'
                        + "</tr>")
                    console.log(data);
                    $("#selectNotChoseCourseTableBody").append(html)
                })

            })

        }
        selectNotChoseCourseConfirm = (studentNo, courseNo) => {
            console.log("已经新增选课,选课的学生学号为" + studentNo + "课程编号为" + courseNo);
            //进行请求新增
            axios({
                url: "/api/score",
                method: "post",
                data: {
                    studentNo: studentNo,
                    courseNo: courseNo
                }
            }).then(() => {
                $("#selectNotChoseCourse").modal("hide")
                $("#showScoreModal").modal("hide")
                successInfo("新增课程成功")
            })
        }








    </script>
</body>

</html>